<template>
    <div class="common">
        <el-form 
            :model="form" 
            :rules="rules" 
            ref="ruleForm" 
            label-width="100px" 
            class="myform">
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="captcha" class="mycaptcha">
                <el-input  type="text" v-model="form.captcha"></el-input>
                <el-button type="success">发送验证码</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="width100" >立即验证</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name:"logincode",
    data(){
        return {
            form:{},
            rules:{   // 表单校验 
                mobile:[
                    {required:true,message:"请输入手机号码",trigger:'blur'}
                ],
                captcha:[
                    {required:true,message:"请输入验证码",trigger:'blur'}
                ]
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.myform{
    padding-right:50px;
    padding-top:20px;
}
.width100{
    width:100%;
}

.mycaptcha {
    ::v-deep .el-form-item__content{
        display:flex;
    }
}
</style>